<template>
  <section>
    <van-sticky>
      <PageHeader title="会员卡"/>
    </van-sticky>
    <div class="bg-color-white">
      <img :src="STATIC_BASE_URL + 'images/vipcard-exchange-banner.jpg'" class="w100"/>
      <div class="pd10 text-left font-big">
        <span v-if="user">{{ user.nick }}，您好!</span>
        <span v-else>您好，请先<router-link :to="{name: 'UserLogin'}" class="blue">登录</router-link></span>
      </div>

      <div class="pl10 text-left font-big">卡号：</div>

      <div class="flex flex-row flex-center pd10">
        <div class="flex flex-row flex-center flex-1">
          <input type="number" v-model="vipCard.no1" class="no-input" />
        </div>

        <div class="flex flex-row flex-center pl10 pr10">-</div>

        <div class="flex flex-row flex-center flex-1">
          <input type="number" v-model="vipCard.no2" class="no-input" />
        </div>

        <div class="flex flex-row flex-center pl10 pr10">-</div>

        <div class="flex flex-row flex-center flex-1">
          <input type="number" v-model="vipCard.no3" class="no-input" />
        </div>

        <div class="flex flex-row flex-center pl10 pr10">-</div>

        <div class="flex flex-row flex-center flex-1">
          <input type="number" v-model="vipCard.no4" class="no-input" />
        </div>
      </div>

      <div class="flex flex-row flex-center pl10 pr10 pb10">
        <div class="flex flex-row flex-center flex-1">
          xxxx
        </div>

        <div class="flex flex-row flex-center pl10 pr10">-</div>

        <div class="flex flex-row flex-center flex-1">
          xxxx
        </div>

        <div class="flex flex-row flex-center pl10 pr10">-</div>

        <div class="flex flex-row flex-center flex-1">
          xxxx
        </div>

        <div class="flex flex-row flex-center pl10 pr10">-</div>

        <div class="flex flex-row flex-center flex-1">
          xxxx
        </div>
      </div>

      <div class="pl10 text-left font-big mb10">验证码：</div>
      <div class="flex flex-centerV flex-left pl10 pr10 pb10">
        <div class="flex flex-row flex-center" style="width: 150px;">
          <input type="text" v-model="vipCard.captcha" class="no-input" />
        </div>

        <div class="flex flex-row flex-center pl10">
          <img :src="captchaImage" height="35" width="100" v-if="captchaImage" />
        </div>

        <div class="flex flex-row flex-center flex-left flex-1 pl10 font-big">
          <a href="javascript:;" class="blue" @click="getCaptcha">换一张</a>
        </div>
      </div>

      <div class="flex flex-row flex-center pt10 pb10">
        <div class="flex flex-row flex-center flex-1 pl10 pr5">
          <van-button block round type="primary" @click="onActiveTap">立即激活</van-button>
        </div>

        <div class="flex flex-row flex-center flex-1 pl5 pr10">
          <van-button block round type="info" @click="getCardInfo">查看权益</van-button>
        </div>
      </div>

      <div class="flex flex-col font-common mt10 pb20">
        <div class="flex flex-row flex-left font-big pl10">使用说明：</div>

        <div class="flex flex-row flex-left mt10 pl10 pr10">
          1、请在有效期内激活，逾期激活码将失效；
        </div>

        <div class="flex flex-row flex-left mt10 pl10 pr10">
          2、会员有效期从激活日算起，同一账号使用多个激活码，会员期自动延长；
        </div>

        <div class="flex flex-row flex-left mt10 pl10 pr10">
          3、激活成功后，即可享有{{APP_NAME}}会员服务，请查看<router-link :to="{name: 'VipRights'}" class="blue">会员权益</router-link>；
        </div>

        <div class="flex flex-row flex-left mt10 pl10 pr10">
          4、在法律允许的范围内，本公司享有解释权，如有疑问，请联系客服。
        </div>
      </div>

    </div>

    <van-overlay :show="vipCardPreviewPopupVisible">
      <div class="flex flex-col flex-center" style="height: 100%;" v-if="card">
        <div class="flex flex-col pd10 bg-color-white round-box" style="width: 60%;">
          <div class="flex flex-row flex-left font-large">会员卡：{{card.name}}</div>
          <div class="flex flex-row flex-left font-common mt10">会员等级：{{card.vip.name}}</div>
          <div class="flex flex-row flex-left font-common mt10">会员有效期：{{card.expire_days}}天</div>
          <div class="flex flex-col font-common mt10">
            <div class="flex flex-row flex-left">权益描述:</div>
            <div class="flex flex-row flex-left mt10" v-html="card.vip.rights.desc"></div>
            <div class="flex flex-row flex-left mt10">
              <router-link :to="{name: 'VipRights'}" class="blue">查看详细权益</router-link>
            </div>
          </div>
        </div>

        <div class="flex flex-row flex-center pd10">
          <i class="iconfont icon-guanbi" style="font-size: 34px; color: #FFFFFF;" @click="vipCardPreviewPopupVisible=false" />
        </div>
      </div>
    </van-overlay>
  </section>
</template>

<script>
import PageHeader from "../componets/PageHeader";
import {captchaEntryUri, STATIC_BASE_URL, vipCardActiveUri, vipCardPreviewUri} from "../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      STATIC_BASE_URL: STATIC_BASE_URL,
      APP_NAME: APP_NAME,
      member: null,
      user: null,
      vipCard: {no1: '', no2: '', no3: '', no4: '', captcha: '', session_id: ''},
      captchaImage: null,
      card: null,
      vipCardPreviewPopupVisible: false
    }
  },
  watch: {
    ['vipCard.no1'](val) {
      this.$nextTick(() => {
        this.vipCard.no1 = val.replace(/\D/g,'').substr(0, 4);
      });
    },

    ['vipCard.no2'](val) {
      this.$nextTick(() => {
        this.vipCard.no2 = val.replace(/\D/g,'').substr(0, 4);
      });
    },

    ['vipCard.no3'](val) {
      this.$nextTick(() => {
        this.vipCard.no3 = val.replace(/\D/g,'').substr(0, 4);
      });
    },

    ['vipCard.no4'](val) {
      this.$nextTick(() => {
        this.vipCard.no4 = val.replace(/\D/g,'').substr(0, 4);
      });
    }
  },
  methods: {
    getCaptcha() {
      const that = this;
      const url = captchaEntryUri;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.vipCard.session_id = data.session_id;
          that.captchaImage = data.captcha;
        }
      }, response => {
        // error callback
      })
    },
    getCardInfo() {
      if(this.vipCard.no1.length == 0 || this.vipCard.no2.length == 0 || this.vipCard.no3.length == 0 || this.vipCard.no4.length == 0) {
        this.toast('请先输入完整的卡号');
        return;
      }
      const no = this.vipCard.no1 + this.vipCard.no2 + this.vipCard.no3 + this.vipCard.no4;
      const that = this;
      const url = vipCardPreviewUri + '?no=' + no;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          data.card.vip.rights.desc = data.card.vip.rights.desc.replaceAll('\n', '<br />');
          that.card = data.card;
          that.vipCardPreviewPopupVisible = true;
        }
      }, response => {
        // error callback
      })
    },
    onActiveTap() {
      if(this.vipCard.no1.length == 0 || this.vipCard.no2.length == 0 || this.vipCard.no3.length == 0 || this.vipCard.no4.length == 0) {
        this.toast('请先输入完整的卡号');
        return;
      }
      if(this.vipCard.captcha.length == 0) {
        this.toast('请输入验证码');
        return;
      }
      const no = this.vipCard.no1 + this.vipCard.no2 + this.vipCard.no3 + this.vipCard.no4;
      const that = this;
      const url = vipCardActiveUri + '?no=' + no + '&session_id=' + this.vipCard.session_id + '&captcha=' + this.vipCard.captcha;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.GLOBAL.memberProfile = data.member;
          that.toast('激活成功');
          that.$router.push({name: 'MyIndex'});
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {
    if (this.GLOBAL.userInfo) {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;
    }

    this.EventBus.$on('OnUserLogined', (data) => {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;
    });

    this.getCaptcha();
  }
}
</script>

<style scoped>
.no-input {
  height: 40px;
  width: 100%;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;
}
</style>
